<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            list-style: none;
            text-decoration: none;
        }
        
        body {
            background-color: #f7f7f7;
            color: #333;
        }

        .main-container {
            width: 1200px;
            margin: 0 auto;
            margin-top: 15px;
        }
        
        .category-tabs {
            display: flex;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            position: sticky;
            top: 80px;
            z-index: 90;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            color: #333;
            text-decoration: none;
            position: relative;
            transition: all 0.3s;
        }
        
        .tab-item.active {
            color: #000;
            font-weight: bold;
        }
        
        .tab-item.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: #000;
        }
        
        .banner-section {
            margin-bottom: 15px;
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .banner-img {
            width: 100%;
            display: block;
        }
        
        .goods-section {
            width: 85%;
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            margin: 0px auto;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .more-link {
            font-size: 14px;
            color: #999;
            text-decoration: none;
        }
        
        .goods-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .goods-item {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s;
            position: relative;
        }
        
        .goods-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .goods-img-container {
            position: relative;
            padding-top: 100%;
            overflow: hidden;
        }
        
        .goods-img {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%,-50%);
            transition: transform 0.5s;
        }
        
        .goods-item:hover .goods-img {
            transform:  translate(-50%,-50%) scale(1.05);
        }
        
        .goods-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ff2442;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            z-index: 1;
        }
        
        .goods-info {
            padding: 10px;
        }
        
        .goods-title {
            font-size: 14px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
        }
        
        .goods-price {
            color: #ff2442;
            font-size: 18px;
            font-weight: bold;
        }
        
        .goods-original-price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        .goods-sold {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        a{
        	color:black;
        	list-style: none;
        }
        #pageBar{
        	width:100%;
        	margin:10px auto;
        	margin-top:20px;
        	text-align: center;
        }
        #pageBar a{
        	margin:10px 10px;
        }
        #pageBar a:hover{
        	text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
        }
        #pageBar .activeColor{
        	color:#00A2E8;
        }
    </style>
</head>
<body>
<%@ include file="header.jsp" %>
    <div class="goods-section">
    	<div class="goods-grid">
    		<c:if test="${not empty page}">
    			<c:forEach items="${page.data}" var="goods" varStatus="stat">
    				<a href="purchase.do?goodsId=${goods.goodsId }">
    					<div class="goods-item">
    						<div class="goods-img-container">
    							<img src="${goods.goodsImg }" alt="商品" class="goods-img">
    						</div>
    						<div class="goods-info">
    							<h3 class="goods-title">${goods.goodsName }</h3>
    							<div>
    								<span class="goods-price">¥${goods.price }</span>
    							</div>
    						</div>
    					</div>
    				</a>
    			</c:forEach>
			</c:if>
		</div>
		<div id="pageBar">
    		<c:if test="${not empty page}">
				<a href="/lego/selectGoods.do?pageNum=1&pageSize=${page.pageSize}${url}">首页</a>
				<c:if test="${page.hasPrev}">
					<a href="/lego/selectGoods.do?pageNum=${page.pageNum-1 }&pageSize=${page.pageSize}${url}"">上一页</a>
				</c:if>
				<c:forEach items="${page.navigatorNums}" var="num" varStatus="stat">
					<a href="/lego/selectGoods.do?pageNum=${num}&pageSize=${page.pageSize}${url}" <c:if test="${page.pageNum==num}">class="activeColor"</c:if>>${num}</a>
				</c:forEach>
				<c:if test="${page.hasNext}">
					<a href="/lego/selectGoods.do?pageNum=${page.pageNum+1 }&pageSize=${page.pageSize}${url}"">下一页</a>
				</c:if>
				<a href="/lego/selectGoods.do?pageNum=${page.totalPages}&pageSize=${page.pageSize}${url}"">尾页</a>
			</c:if>
		</div>
    </div>
    
</body>           
<%@ include file="footer.jsp" %>
<script>
	
</script>
</html>